<!--审批管理-->
<template>
    <div class="information">
        <div class="work-title">
            <div>
                <el-button size="mini" @click="backClick">返回</el-button>
            </div>
            <div>
                {{this.$route.query.titleName}} 流程设置
            </div>
            <div></div>
        </div>
        <div class="work-content">
            <div class="flow">
                <div class="flowTop">
                    当审批同时满足以下条件时
                </div>
                <div class="flowPersonBox" v-for="(item,index) in list" :key="index">
                    <div class="flowPerson" v-show="item.judge == 1">
                        <div>
                            {{item.label}}
                        </div>
                        <ul>
                            <li class="optionLi" v-show='item.type == "3"' :key="indOp" v-for="(iteOp,indOp) in item.showList" @click="optionClick(index,indOp)">
                                <div class="optionShow">
                                    <div class="optionTrue" v-show='iteOp.show == true'>
                                        <div class="optionTrueBor"></div>
                                    </div>
                                    <div v-show='iteOp.show == false' class="optionFalse"></div>
                                </div>
                                <div class="optionName">
                                    {{iteOp.value}}
                                </div>
                            </li>
                            <li class="numLi" v-show='item.type == "2"'>
                                <div>
                                    <select v-model="item.numKey">
                                        <option v-for="(type,index) in item.numList" v-bind:value="type.id">{{type.value}}</option>
                                    </select>
                                </div>
                                <div class="numInp">
                                    <input type="text" v-model='item.numVal' oninput="this.value=this.value.replace(/[^\d]/g,'')">
                                </div>
                                <div class="numInp">
                                    <span v-show='item.numKey == "5"'>&lt;&emsp;{{item.label}}&emsp;≤ </span>
                                    <span v-show='item.numKey == "6"'> ≤&emsp;{{item.label}}&emsp;&lt; </span>
                                    <span v-show='item.numKey == "7"'>&lt;&emsp;{{item.label}}&emsp;&lt;</span>
                                    <span v-show='item.numKey == "8"'> ≤&emsp;{{item.label}}&emsp;≤ </span>
                                </div>
                                <div class="numInp" v-show='item.numKey == "5" || item.numKey == "6" || item.numKey == "7" || item.numKey == "8"'>
                                    <input type="text" v-model='item.numVals' oninput="this.value=this.value.replace(/[^\d]/g,'')">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="flowPerson">
                    <div class='biueFont' @click='conditionClick()'>
                        +更多条件
                    </div>
                </div>
            </div>
            <div class="conditionBox">
                <div class="flowPerson">
                    <div class="blackFont">对应审批人</div>
                    <ul>
                        <li class="flowLi" :key="appInd" v-for="(item,appInd) in copyList" @click='deleteCopy(appInd)'>
                            <div v-if="item.url" class="flowLiImg">
                                <img :src="item.url" alt="">
                            </div>
                            <div v-else class="flowLiImgNo">
                                {{item.name | nameFun}}
                            </div>
                            <div class="flowLiName">
                                {{item.name}}
                            </div>
                        </li>
                        <li class="flowLi" @click="addcopyListClick">
                            <div class="addflowLi"></div>
                            <div class="flowLiName">
                                添加
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="button">
                <div class="addBut">
                  <el-button type="primary" size="medium" @click="addClick">保存</el-button>
                </div>
            </div>
        </div>
        <div class="boxBack" v-show="boxShow">
            <div class="box">
                <div class="boxTop">
                    <div>选择条件</div>
                    <div @click="boxCancelClick()">+</div>
                </div>
                <div class="boxContent">
                    <div>请选择用来区分审批流程的条件字段</div>
                    <ul>
                        <li class="optionLi" :key="index" v-for="(item,index) in lists" v-if="item.required == 1" @click="optionLiClick(index)">
                            <div class="optionShow">
                                <div class="optionTrue" v-show="item.judge == '1'">
                                    <div class="optionTrueBor"></div>
                                </div>
                                <div v-show="item.judge == '0'" class="optionFalse"></div>
                            </div>
                            <div class="optionName">
                                {{item.label}}
                            </div>
                        </li>
                    </ul>
                    <div v-if='optionNoShow'>非必填条件不能用来区分流程，如需使用请前往表单设置</div>
                    <ul>
                        <li class="optionLi optionNo" :key="index" v-for="(item,index) in list" v-if="item.required == 0">
                            <div class="optionShowNo"></div>
                            <div class="optionName fontNo">
                                {{item.label}}
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="boxAddOrCancel">
                    <div class="boxAdd" @click="boxAddClick()">保存</div>
                    <div class="boxCancel" @click="boxCancelClick()">取消</div>
                </div>
            </div>
        </div>
        <!-- 新增默认审批人列表 -->
        <v-addPelete :isupdatePop="copyShow" @affirm="copyListaffirmUserListsClick" @cancel="copyListcancelUserListsClick"
            :userselectpop="copyLists"></v-addPelete>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import addPelete from "../../cModel/addressPelete.vue";
export default {
  components: {
    "v-addPelete": addPelete
  },
  data() {
    return {
      copyList: [], // 审批展示人列表
      copyShow: false, // 选择审批人弹出框
      copyLists: [], // 已有审批人
      list: [],
      lists: [],
      boxShow: false, // 弹出框
      optionNoShow: false,
      conditionId: ""
    };
  },
  filters: {
    nameFun: function(val) {
      if (val) {
        if (val.length > 2) {
          return val.slice(val.length - 2);
        } else {
          return val;
        }
      }
    }
  },
  created: function() {
    var self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      if (this.$route.query.conditionId) {
        self
          .getapprovalconditiongetapprover({
            modelId: this.$route.query.modelId,
            conditionId: this.$route.query.conditionId
          })
          .then(data => {
            if (data.statusCode == 200) {
              if (data.data.conditionId) {
                self.conditionId = data.data.conditionId;
              }
              if (data.data.approverList) {
                data.data.approverList.forEach(function(ele, ind) {
                  self.copyList.push({
                    url: ele.profile ? ele.profile : "",
                    memberId: ele.memberId,
                    name: ele.name
                  });
                });
              }
              if (data.data.modelItemList) {
                data.data.modelItemList.forEach(function(ele, ind) {
                  self.list.push({
                    type: ele.type,
                    modelItemId: ele.modelItemId,
                    field: ele.field,
                    judge: ele.judge,
                    label: ele.label,
                    required: ele.required,
                    option: ele.option ? ele.option.split(",") : [],
                    value: ele.value ? ele.value.split(",") : "",
                    // value: ele.value ? ele.value.split(" ") : [],
                    numVal: "",
                    numVals: "",
                    showList: [],
                    numList: [
                      { value: "大于", id: "0" },
                      { value: "小于", id: "1" },
                      { value: "等于", id: "2" },
                      { value: "大于等于", id: "3" },
                      { value: "小于等于", id: "4" },
                      { value: "介于（< ≤）", id: "5" },
                      { value: "介于（≤ <）", id: "6" },
                      { value: "介于（< <）", id: "7" },
                      { value: "介于（≤ ≤）", id: "8" }
                    ],
                    numKey: "0"
                  });
                });
                for (var k = 0; k < self.list.length; k++) {
                  if (self.list[k].required == 0) {
                    self.optionNoShow = true;
                  }
                  if (self.list[k].type == "3") {
                    if (self.list[k].value.length > 0) {
                      for (var i = 0; i < self.list[k].option.length; i++) {
                        var pushShow = false;
                        for (var j = 0; j < self.list[k].value.length; j++) {
                          if (self.list[k].option[i] == self.list[k].value[j]) {
                            pushShow = true;
                          }
                        }
                        if (pushShow) {
                          self.list[k].showList.push({
                            value: self.list[k].option[i],
                            show: true
                          });
                        } else {
                          self.list[k].showList.push({
                            value: self.list[k].option[i],
                            show: false
                          });
                        }
                      }
                    } else {
                      for (var i = 0; i < self.list[k].option.length; i++) {
                        self.list[k].showList.push({
                          value: self.list[k].option[i],
                          show: false
                        });
                      }
                    }
                  }
                  if (self.list[k].type == "2") {
                    if (self.list[k].value.length > 0) {
                      if (self.list[k].value.length == "3") {
                        self.list[k].numVal = self.list[k].value[2];
                        var str = self.list[k].value[1];
                        if (str.indexOf(">") > -1) {
                          self.list[k].numKey = 0;
                        } else if (str.indexOf("<") > -1) {
                          self.list[k].numKey = 1;
                        } else if (str.indexOf("=") > -1) {
                          self.list[k].numKey = 2;
                        } else if (str.indexOf("≥") > -1) {
                          self.list[k].numKey = 3;
                        } else if (str.indexOf("≤") > -1) {
                          self.list[k].numKey = 4;
                        }
                      }
                      if (self.list[k].value.length == "5") {
                        self.list[k].numVal = self.list[k].value[0];
                        self.list[k].numVals = self.list[k].value[4];
                        var str = self.list[k].value[1];
                        var strs = self.list[k].value[3];
                        if (str.indexOf("<") > -1 && strs.indexOf("≤") > -1) {
                          self.list[k].numKey = 5;
                        } else if (
                          str.indexOf("≤") > -1 &&
                          strs.indexOf("<") > -1
                        ) {
                          self.list[k].numKey = 6;
                        } else if (
                          str.indexOf("<") > -1 &&
                          strs.indexOf("<") > -1
                        ) {
                          self.list[k].numKey = 7;
                        } else if (
                          str.indexOf("≤") > -1 &&
                          strs.indexOf("≤") > -1
                        ) {
                          self.list[k].numKey = 8;
                        }
                      }
                    }
                  }
                }
              }
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message(data.statusMessage);
            }
          })
          .catch(msg => {
            self.$message("服务器异常");
          });
      } else {
        self
          .getapprovalconditionget({
            modelId: this.$route.query.modelId
          })
          .then(data => {
            if (data.statusCode == 200) {
              if (data.data) {
                data.data.forEach(function(ele, ind) {
                  self.list.push({
                    type: ele.type,
                    modelItemId: ele.modelItemId,
                    field: ele.field,
                    judge: ele.judge,
                    label: ele.label,
                    required: ele.required,
                    option: ele.option ? ele.option.split(",") : [],
                    value: ele.value ? ele.value.split(",") : "",
                    // value: ele.value ? ele.value.split(" ") : [],
                    numVal: "",
                    numVals: "",
                    showList: [],
                    numList: [
                      { value: "大于", id: "0" },
                      { value: "小于", id: "1" },
                      { value: "等于", id: "2" },
                      { value: "大于等于", id: "3" },
                      { value: "小于等于", id: "4" },
                      { value: "介于（< ≤）", id: "5" },
                      { value: "介于（≤ <）", id: "6" },
                      { value: "介于（< <）", id: "7" },
                      { value: "介于（≤ ≤）", id: "8" }
                    ],
                    numKey: "0"
                  });
                });
                for (var k = 0; k < self.list.length; k++) {
                  if (self.list[k].required == 0) {
                    self.optionNoShow = true;
                  }
                  if (self.list[k].type == "3") {
                    if (self.list[k].value.length > 0) {
                      for (var i = 0; i < self.list[k].option.length; i++) {
                        var pushShow = false;
                        for (var j = 0; j < self.list[k].value.length; j++) {
                          if (self.list[k].option[i] == self.list[k].value[j]) {
                            pushShow = true;
                          }
                        }
                        if (pushShow) {
                          self.list[k].showList.push({
                            value: self.list[k].option[i],
                            show: true
                          });
                        } else {
                          self.list[k].showList.push({
                            value: self.list[k].option[i],
                            show: false
                          });
                        }
                      }
                    } else {
                      for (var i = 0; i < self.list[k].option.length; i++) {
                        self.list[k].showList.push({
                          value: self.list[k].option[i],
                          show: false
                        });
                      }
                    }
                  }
                  if (self.list[k].type == "2") {
                    if (self.list[k].value.length > 0) {
                      if (self.list[k].value.length == "3") {
                        self.list[k].numVal = self.list[k].value[2];
                        var str = self.list[k].value[1];
                        if (str.indexOf(">") > -1) {
                          self.list[k].numKey = 0;
                        } else if (str.indexOf("<") > -1) {
                          self.list[k].numKey = 1;
                        } else if (str.indexOf("=") > -1) {
                          self.list[k].numKey = 2;
                        } else if (str.indexOf("≥") > -1) {
                          self.list[k].numKey = 3;
                        } else if (str.indexOf("≤") > -1) {
                          self.list[k].numKey = 4;
                        }
                      }
                      if (self.list[k].value.length == "5") {
                        self.list[k].numVal = self.list[k].value[0];
                        self.list[k].numVals = self.list[k].value[4];
                        var str = self.list[k].value[1];
                        var strs = self.list[k].value[3];
                        if (str.indexOf("<") > -1 && strs.indexOf("≤") > -1) {
                          self.list[k].numKey = 5;
                        } else if (
                          str.indexOf("≤") > -1 &&
                          strs.indexOf("<") > -1
                        ) {
                          self.list[k].numKey = 6;
                        } else if (
                          str.indexOf("<") > -1 &&
                          strs.indexOf("<") > -1
                        ) {
                          self.list[k].numKey = 7;
                        } else if (
                          str.indexOf("≤") > -1 &&
                          strs.indexOf("≤") > -1
                        ) {
                          self.list[k].numKey = 8;
                        }
                      }
                    }
                  }
                }
              }
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message(data.statusMessage);
            }
          })
          .catch(msg => {
            self.$message("服务器异常");
          });
      }
    }
  },
  methods: {
    // 添加默认审批人
    addcopyListClick() {
      var self = this;
      this.copyShow = true;
      if (self.copyList) {
        if (self.copyList.length > 0) {
          self.copyLists = self.copyList;
        }
      }
    },
    // 添加默认审批人确认
    copyListaffirmUserListsClick(val) {
      var self = this;
      if (val.length > 0) {
        self.copyList = val;
      } else {
        self.copyList = [];
      }
      this.copyShow = false;
    },
    // 添加默认审批人取消
    copyListcancelUserListsClick(val) {
      this.copyShow = false;
      this.copyList = val;
    },
    // 删除默认审批人
    deleteCopy(appInd) {
      this.copyList.splice(appInd, 1);
    },
    // 返回
    backClick() {
      this.$router.go(-1);
    },
    //条件选择
    optionClick(index, indOp) {
      this.list[index].showList[indOp].show = !this.list[index].showList[indOp]
        .show;
    },
    //更多条件
    conditionClick() {
      var self = this;
      self.lists = [];
      self.list.forEach(function(ele, ind) {
        self.lists.splice(self.list.length, 0, {
          type: ele.type,
          modelItemId: ele.modelItemId,
          field: ele.field,
          judge: ele.judge,
          label: ele.label,
          required: ele.required,
          option: ele.option ? ele.option : [],
          value: ele.value ? ele.value : "",
          // value: ele.value ? ele.value : [],
          numVal: ele.numVal,
          numVals: ele.numVals,
          showList: ele.showList,
          numList: ele.numList,
          numKey: ele.numKey
        });
      });
      self.boxShow = true;
    },
    //弹框条件选择
    optionLiClick(index) {
      if (this.lists[index].judge == 1) {
        this.lists[index].judge = 0;
      } else if (this.lists[index].judge == 0) {
        this.lists[index].judge = 1;
      }
    },
    //弹出框确定
    boxAddClick() {
      var self = this;
      self.list = [];
      self.lists.forEach(function(ele, ind) {
        self.list.splice(self.list.length, 0, {
          type: ele.type,
          modelItemId: ele.modelItemId,
          field: ele.field,
          judge: ele.judge,
          label: ele.label,
          required: ele.required,
          option: ele.option ? ele.option : [],
          value: ele.value ? ele.value : "",
          // value: ele.value ? ele.value : [],
          numVal: ele.numVal,
          numVals: ele.numVals,
          showList: ele.showList,
          numList: ele.numList,
          numKey: ele.numKey
        });
      });
      this.boxShow = false;
    },
    //弹出框取消
    boxCancelClick() {
      this.boxShow = false;
    },
    // 保存
    addClick() {
      var self = this;
      if (self.list.length == 0) {
        self.$message("最少添加一个有效条件");
        return;
      }
      if (self.copyList.length == 0) {
        self.$message("请添加对应审批人");
        return;
      }
      var memberIds = [];
      self.copyList.forEach(function(ele, ind) {
        memberIds.push(ele.memberId);
      });
      var arr = [];
      self.list.forEach(function(ele, ind) {
        arr.push({
          type: ele.type,
          modelItemId: ele.modelItemId,
          field: ele.field,
          judge: ele.judge,
          label: ele.label,
          required: ele.required,
          option: ele.option,
          numVal: ele.numVal,
          numVals: ele.numVals,
          numKey: ele.numKey,
          value: "",
          showList: ele.showList,
          valueList: []
        });
      });
      var showListShow = [];
      var numValShow = false;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].type == "3") {
          for (var j = 0; j < arr[i].showList.length; j++) {
            if (arr[i].showList[j].show == true) {
              arr[i].valueList.push(arr[i].showList[j].value);
              showListShow.push(arr[i].showList[j].value);
            }
          }
          arr[i].value = arr[i].valueList.join(",");
        } else if (arr[i].type == "2") {
          if (
            arr[i].numKey == "5" ||
            arr[i].numKey == "6" ||
            arr[i].numKey == "7" ||
            arr[i].numKey == "8"
          ) {
            if (arr[i].numVal != "" && arr[i].numVals != "") {
              if (arr[i].numVal >= arr[i].numVals) {
                self.$message("请填入正确的数字条件");
                return;
              }
            }
          }

          if (arr[i].numKey == "0") {
            if (arr[i].numVal) {
              numValShow = true;
              arr[i].value = arr[i].field + " " + ">" + " " + arr[i].numVal;
            }
          } else if (arr[i].numKey == "1") {
            if (arr[i].numVal != "") {
              numValShow = true;
              arr[i].value = arr[i].field + " " + "<" + " " + arr[i].numVal;
            }
          } else if (arr[i].numKey == "2") {
            if (arr[i].numVal != "") {
              numValShow = true;
              arr[i].value = arr[i].field + " " + "=" + " " + arr[i].numVal;
            }
          } else if (arr[i].numKey == "3") {
            if (arr[i].numVal != "") {
              numValShow = true;
              arr[i].value = arr[i].field + " " + "≥" + " " + arr[i].numVal;
            }
          } else if (arr[i].numKey == "4") {
            if (arr[i].numVal != "") {
              numValShow = true;
              arr[i].value = arr[i].field + " " + "≤" + " " + arr[i].numVal;
            }
          } else if (arr[i].numKey == "5") {
            if (arr[i].numVal != "" && arr[i].numVals != "") {
              numValShow = true;
              arr[i].value =
                arr[i].numVal +
                " " +
                "<" +
                " " +
                arr[i].field +
                " " +
                "≤" +
                " " +
                arr[i].numVals;
            }
          } else if (arr[i].numKey == "6") {
            if (arr[i].numVal != "" && arr[i].numVals != "") {
              numValShow = true;
              arr[i].value =
                arr[i].numVal +
                " " +
                "≤" +
                " " +
                arr[i].field +
                " " +
                "<" +
                " " +
                arr[i].numVals;
            }
          } else if (arr[i].numKey == "7") {
            if (arr[i].numVal != "" && arr[i].numVals != "") {
              numValShow = true;
              arr[i].value =
                arr[i].numVal +
                " " +
                "<" +
                " " +
                arr[i].field +
                " " +
                "<" +
                " " +
                arr[i].numVals;
            }
          } else if (arr[i].numKey == "8") {
            if (arr[i].numVal != "" && arr[i].numVals != "") {
              numValShow = true;
              arr[i].value =
                arr[i].numVal +
                " " +
                "≤" +
                " " +
                arr[i].field +
                " " +
                "≤" +
                " " +
                arr[i].numVals;
            }
          }
        }
      }
      if (showListShow.length == "0" && numValShow == false) {
        self.$message("最少选择一个有效的条件");
        return;
      }
      self
        .getapprovalconditionsave({
          modelId: self.$route.query.modelId,
          judge: JSON.stringify(arr),
          memberIds: memberIds.join(","),
          conditionId: self.conditionId
        })
        .then(data => {
          if (data.statusCode == 200) {
            this.$router.go(-1);
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: data.statusMessage
          });
        });
    },
    ...mapActions([
      "getapprovalconditionget",
      "getapprovalconditionsave",
      "getapprovalconditiongetapprover"
    ])
  }
};
</script>
<style scoped>
.information {
  width: 100%;
  background-color: #fff;
  min-height: 600px;
  /* height: 100%; */
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex-wrap: wrap;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.work-title {
  height: 55px;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.work-title > div:nth-child(1) {
  width: 58px;
  height: 26px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 26px;
  margin-left: 15px;
  cursor: pointer;
}

.work-title > div:nth-child(2) {
  font-size: 14px;
  color: #333;
  margin-right: 15px;
}

.work-content {
  width: 100%;
  justify-content: space-between;
  overflow: hidden;
}

.flow {
  width: 80%;
  margin: 40px 10% 0 10%;
}

.flow > div {
  margin-top: 15px;
  margin-bottom: 15px;
}

.flowTop {
  font-size: 14px;
  color: rgb(50, 51, 52);
  width: 100%;
}

.flowPerson {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.flowPerson > div {
  width: 90px;
  margin-right: 10px;
  color: #999;
}

.flowPerson > ul {
  width: 750px;
  display: flex;
  flex-wrap: wrap;
}

.flowLi {
  width: 50px;
  height: 55px;
  margin: 5px 4px;
  cursor: pointer;
}

.addflowLi {
  width: 37px;
  height: 37px;
  margin: 0 auto;
  border: 1px solid #d1d1d1;
  border-radius: 100%;
  background: url("/static/img/添加.png") 50% no-repeat;
  background-size: 120%;
}

.flowLiImg {
  border: 1px solid #d1d1d1;
  border-radius: 100%;
  width: 37px;
  height: 37px;
  margin: 0 auto;
}

.flowLiImg img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.flowLiName {
  width: 50px;
  height: 10px;
  font-size: 12px;
  text-align: center;
  color: #999;
}

.flowLiImgNo {
  border: 1px solid #d1d1d1;
  border-radius: 100%;
  width: 37px;
  height: 37px;
  margin: 0 auto;
  text-align: center;
  line-height: 37px;
  background: linear-gradient(
    151.7deg,
    rgba(102, 173, 247, 1),
    rgba(67, 144, 225, 0.5)
  );
}

.conditionBox {
  width: 90%;
  padding: 20px 0;
  margin: 0 auto;
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}

.condition {
  width: 90%;
  height: 50px;
  margin: 30px auto 10px;
  display: flex;
}

.conditionTop {
  width: 160px;
  height: 50px;
  line-height: 50px;
  display: flex;
}

.conditionTopI {
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
  color: white;
  background: #aaa;
  margin: auto 10px;
  position: relative;
  border-radius: 100%;
  cursor: pointer;
}

.conditionTopIFont {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.75);
  width: 200px;
  letter-spacing: 2px;
  height: 36px;
  line-height: 18px;
  top: -63px;
  left: -90px;
  padding: 8px;
  border-radius: 5px;
  display: none;
}

.conditionTopIFontsan {
  border-top: 7px solid rgba(0, 0, 0, 0);
  border-right: 7px solid rgba(0, 0, 0, 0.75);
  border-bottom: 7px solid rgba(0, 0, 0, 0.75);
  border-left: 7px solid rgba(0, 0, 0, 0);
  position: absolute;
  bottom: -7px;
  left: 90px;
  transform: rotate(45deg);
}

.conditionTopI:hover > .conditionTopIFont {
  display: block;
}

.setCondition {
  width: 50px;
  height: 24px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 24px;
  margin-top: 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #aaa;
  border: 1px solid #aaa;
}

.blueBorder {
  width: 50px;
  height: 24px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 24px;
  margin-top: 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #49a9ee;
  border: 1px solid #49a9ee;
  border: 1px solid #49a9ee;
}

.conditionRight {
  width: 260px;
  height: 50px;
  line-height: 50px;
  display: flex;
  margin-left: 40px;
}

.button {
  display: flex;
}

.addBut {
  margin-left: 10%;
  margin-top: 30px;
  width: 70px;
  text-align: center;
  letter-spacing: 4px;
  background: #49a9ee;
  border-radius: 4px;
  cursor: pointer;
  color: white;
}

.blackFont {
  color: black !important;
}

.optionLi {
  display: flex;
  height: 14px;
  cursor: pointer;
  margin-right: 24px;
  margin-top: 7px;
  margin-bottom: 7px;
}

.numLi {
  display: flex;
  height: 24px;
  cursor: pointer;
}

.numInp {
  margin-left: 24px;
}

.numInp input {
  width: 60px;
  height: 24px;
  border: 1px solid #aca9a9;
  border-radius: 4px;
  padding: 0 4px;
}

.optionShow {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}

.optionTrue {
  width: 14px;
  height: 14px;
  background: #49a9ee;
  position: relative;
  border-radius: 3px;
}

.optionTrueBor {
  width: 3px;
  height: 7px;
  transform: rotate(45deg);
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  position: absolute;
  top: 2px;
  left: 5px;
}

.optionFalse {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #999;
}

.optionLi:hover > .optionShow > .optionFalse {
  border: 1px solid #49a9ee;
}

.optionName {
  font-size: 14px;
  line-height: 14px;
}

.biueFont {
  color: #49a9ee !important;
  cursor: pointer;
}

.boxBack {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.5);
}

.box {
  width: 520px;
  min-height: 200px;
  background: white;
  border-radius: 4px;
  margin: 200px auto;
}

.boxTop {
  width: 480px;
  height: 21px;
  line-height: 21px;
  padding: 13px 20px;

  display: flex;
  justify-content: space-between;
}

.boxTop > div:nth-child(2) {
  transform: rotate(45deg);
  font-size: 30px;
  cursor: pointer;
}

.boxContent {
  width: 480px;
  padding: 20px;
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
}

.boxContent > div {
  height: 14px;
  margin: 20px 0;
}

.boxContent > ul {
  display: flex;
  flex-wrap: wrap;
}

.optionShowNo {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.fontNo {
  color: rgba(0, 0, 0, 0.4) !important;
}

.optionNo:hover {
  cursor: not-allowed;
}

.boxAddOrCancel {
  width: 480px;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}

.boxAddOrCancel > div {
  width: 50px;
  height: 24px;
  margin-left: 14px;
  color: white;
  text-align: center;
  line-height: 24px;
  border-radius: 4px;
  cursor: pointer;
}

.boxAdd {
  background: #49a9ee;
}

.boxCancel {
  background: #999;
}

select {
  width: 120px;
  height: 26px;
  line-height: 26px;
  padding-left: 16px;
  color: #8f8e94;
  border-radius: 3px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url("/static/img/blueArrows.jpg") 92% 8px no-repeat transparent;
  font-size: 14px;
  color: #97969b;
  border: 1px solid #aeaeae;
  overflow: hidden;
}

select::-ms-expand {
  display: none;
}
</style>